import { defineStore } from 'pinia'
import { accountLogin, getInfoById, getUserMenusByRoleId } from '@/service/login/login'
import type { Icount } from '@/types'
import { localCache } from '@/utils/cache'
import { mapMenusToRoute } from '@/utils/map-menus'
import { MockLoginInfo, MockUserInfo, MockUserMenus } from '@/mock/login'
import router from '@/router'

import { LOGIN_TOKEN, LOGIN_USERINFO, LOGIN_USERMENUS, LOGIN_USERNAME } from '@/global/constants'

// 定义state中数据的类型
interface ILoginState {
  token: string
  userInfo: any
  userMenus: any
  userName: striing
}

export const useLoginStore = defineStore('login', {
  state: (): ILoginState => {
    return {
      token: localCache.getCache(LOGIN_TOKEN) ?? '',
      userName: localCache.getCache(LOGIN_USERNAME) ?? '',
      userInfo: localCache.getCache(LOGIN_USERINFO) ?? {},
      userMenus: localCache.getCache(LOGIN_USERMENUS) ?? [],
    }
  },
  getters: {
    // doubleCount: (state) => state.count * 2,
  },
  actions: {
    // 登录
    async loginAccountAction(account: Icount) {
      // 1、调接口，获取用户的数据
      // const loginRes = await accountLogin(account)
      const id = MockLoginInfo.id
      this.token = MockLoginInfo.token
      this.userName = MockLoginInfo.name
      localCache.setCache(LOGIN_TOKEN, this.token) // 将token存起来，下面两个接口的请求头里面需要携带token

      // 2、获取登录用户的详细信息(role)
      // this.userInfo = await getInfoById(id)
      this.userInfo = MockUserInfo
      console.log('用户信息', this.userInfo)

      // 3、根据用户的角色请求用户的权限(菜单数据)
      // this.userMenus = await getUserMenusByRoleId(this.userInfo.role.id)
      this.userMenus = MockUserMenus

      // 4、将数据存到本地
      localCache.setCache(LOGIN_USERINFO, this.userInfo)
      localCache.setCache(LOGIN_USERMENUS, this.userMenus)
      localCache.setCache(LOGIN_USERNAME, this.userName)

      // 5、根据菜单列表，匹配展示哪些路由，将符合的路由添加到main的子路由中
      const permissionRoutes = mapMenusToRoute(this.userMenus)
      // console.log('符合权限的路由', permissionRoutes)
      permissionRoutes.forEach((item) => router.addRoute('main', item))

      // 6、登录成功跳转到首页
      router.push('/main')
    },

    // 现在存在一个问题，如果我当前在/main下的某个目录里，刷新页面的时候，路由只会加载静态路由，动态路由不会加载，因为动态路由的逻辑写在登录逻辑里面，刷新页面不会执行登录逻辑
    // 解决方案：在合适的时机，将加载动态路由的逻辑再执行一遍，可以在main.ts中执行
    refreshUpdateDynamicsRoute() {
      // 先判断是不是已经登录，如果未登录，也不需要渲染动态路由
      const token = localCache.getCache(LOGIN_TOKEN)
      const userInfo = localCache.getCache(LOGIN_USERINFO)
      const userMenus = localCache.getCache(LOGIN_USERMENUS)

      if (token && userInfo && userMenus) {
        const permissionRoutes = mapMenusToRoute(this.userMenus)
        // console.log('符合权限的路由', permissionRoutes)
        permissionRoutes.forEach((item) => router.addRoute('main', item))
      }
    },

    // 退出登录
    logout() {
      // 1、清空缓存
      localCache.removeCache(LOGIN_TOKEN)
      // 2、跳转回登录页
      router.push('/login')
    },
  },
})

export default useLoginStore
